<template>
  <el-dialog v-model="show"
             title=""
             @open="copyData"
             :close-on-click-modal="true"
             :width="'90%'"
             :max-width="'648px'"
             class="dialog648"
  >
    <div>
      <p style="text-align: center;font-size: 16px;">编辑个人资料</p>
    </div>
    <div style="padding: 12px 0;">
      <div style="position: relative;">
        <img style="max-width: 648px;width: 100%;" :src="coverImageUrl" alt="封面">
        <div @click="()=>{coverFileInput.click()}" class="flex-column-center cover-mask" style="width: 100%;height: 100%;position: absolute;z-index: 999;top: 0;">
          <img style="width: 50px;height: 50px;" src="../../assets/draw.svg" alt="画笔">
          <span style="color: #f1f1f1;font-weight: bold;margin-top: 4px;">设置封面</span>
        </div>
      </div>
      <div class="info-container">
        <p>个人头像</p>
        <div class="info-inner-container" style="display: flex;">
          <div class="user-info-img-container" style="position: relative;">
            <img class="user-info-img" :src="headImageUrl" alt="头像">
            <div @click="()=>{headFileInput.click();}" class="flex-row-center" style="width: 40px;height: 40px;position: absolute;bottom: 0;right: 0;background-color: rgba(0, 0, 0, 0.32);border-radius: 50%;cursor: pointer;">
              <img style="" src="../../assets/draw.svg" alt="画笔">
            </div>
          </div>
          <div class="tip-box" style="flex-grow: 1;display: flex;flex-direction: column;align-items: center;transition: 0.5s;">
            <div style="padding: 16px;border-radius: 12px;background-color: rgba(0, 0, 0, 0.04);display: flex;align-items: center;">
              <el-icon style="margin-right: 6px;"><InfoFilled /></el-icon>
              <p style="color: #474747;font-weight: 500;">根据您上传的图片及设备显示不同，图片四周有可能会显示不全。</p>
            </div>
            <p class="tip-p2" style="max-width: 450px;font-weight: 500;margin-top: 12px;">请不要上传R-18或其他违反公序良俗的作品。如果您上传了相关作品文件，您的账号可能被永久封禁。</p>
          </div>
        </div>

        <p>昵称</p>
        <el-input v-model="infoInstance.nickname" class="no-border-input" style="max-width: 370px;" show-word-limit maxlength="15"/>
        <p>自我介绍</p>
        <el-input v-model="infoInstance.intro" class="no-border-input" style="" :autosize="{ minRows: 4 }" type="textarea"/>
        <p>性别</p>
        <el-select
            class="no-border-select"
            v-model="infoInstance.gender"
            placeholder="请选择"
            size="large"
            style="max-width: 240px"
        >
          <el-option
              v-for="item in [{label:'保密',value: 0},{label:'男',value: 1},{label:'女',value: 2}]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>

    </div>
    <template #footer>
     <div class="button-box edit-info-button-box">
       <el-button @click="upload" type="primary">保存修改</el-button>
       <el-button style="margin-left: 0;margin-top: 8px;" @click="()=>{show=false}" type="info">取消</el-button>
     </div>
    </template>

    <input @change="coverImageChange" type="file" ref="coverFileInput" style="position: absolute;opacity: 0;" accept="image/*">
    <input @change="headImageChange" type="file" ref="headFileInput" style="position: absolute;opacity: 0;" accept="image/*">
  </el-dialog>

</template>

<script setup lang="ts">
import {ref} from "vue";
import {InfoFilled} from "@element-plus/icons-vue";
import {uploadUserImageRequest, uploadUserInfoRequest} from "../../api/user.ts";
import {messageError, messageInfo, messageSuccess} from "../../util/message.ts";

const coverImageUrl = ref('/api/getSelfCover');
const headImageUrl = ref('/api/getSelfImage');

const coverFileInput = ref({click:()=>{}});
const headFileInput = ref({click:()=>{}});

const coverFile = ref(null);
const headFile = ref(null);

const show = defineModel();

const props = defineProps({
  info: {
    type: Object,
    required: true
  },
  after: {
    type: Function,
    required: true
  }
});

const infoInstance = ref({
  nickname: "",
  intro: "",
  gender: 0
})

async function copyData(){
  infoInstance.value = JSON.parse(JSON.stringify(props.info));
}

const coverImageChange = async (event) => {
  const file = event.target.files[0];
  coverImageUrl.value = URL.createObjectURL(file);
  coverFile.value = file;
}

const headImageChange = async (event: any) => {
  const file = event.target.files[0];
  headImageUrl.value = URL.createObjectURL(file);
  headFile.value = file;
}

const upload = async () => {
  let edit = false;
  let error = false;
  if (coverFile.value!==null || headFile.value!==null) {
    edit = true;
    const response = await uploadUserImageRequest(coverFile.value, headFile.value);
    if (response.data.success){
      messageSuccess("图片上传成功");
    }else {
      error = true;
      messageError(response.data.message);
    }
  }
  if (JSON.stringify(infoInstance.value)!==JSON.stringify(props.info)){
    edit = true;
    const infoResponse = await uploadUserInfoRequest(infoInstance.value);
    if (infoResponse.data.success){
      messageSuccess("信息修改成功")
    }else {
      error = true;
      messageError(infoResponse.data.message);
    }
  }
  if (props.after){
    await props.after();
  }
  if (!edit){
    messageInfo("未修改任何信息");
  }else {
    if (!error) {
      show.value = false;
    }
  }
}

</script>

<style>
.dialog648{
  max-width: 648px;
  border-radius: 32px;
  padding-left: 0;
  padding-right: 0;
  margin-top: 24px!important;
}
.edit-info-button-box>button>span{
  font-weight: bold;
}

@media screen and (max-width: 470px) {
  .info-inner-container{
    flex-direction: column;
  }
  .tip-box{
    margin-top: 12px;
  }
}

@media screen and (max-width: 528px) {
  .tip-p2{
    display: none!important;
  }
}

</style>

<style scoped>
.button-box{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button-box>button{
  width: calc(100% - 32px);
  max-width: 392px!important;
  border-radius: 32px;
}

.info-container{
  padding: 12px 24px;
}

.info-container>p{
  margin-bottom: 6px;
}

.info-container>div{
  margin-bottom: 12px;
}

.cover-mask:hover{
  background-color: rgba(0, 0, 0, 0.7);
}

.cover-mask{
  cursor: pointer;
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0.4);
}

</style>